<template>
  <div class="flex container">
    <!-- 我的余额 -->
    <div class="flex center">
      <div class="price"><i>0.00</i>元</div>
      <p>我的余额</p>
    </div>
    <!-- 我的优惠 -->
    <div class="flex center">
      <div class="count"><i>0</i>个</div>
      <p>我的优惠</p>
    </div>
    <!-- 我的积分 -->
    <div class="flex center">
      <div class="score"><i>0</i>分</div>
      <p>我的积分</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Info",
};
</script>
<style lang="less" scoped>
.container {
  border-bottom: 15px solid #eee;
  div {
    flex: 1;
    flex-direction: column;
    padding: 10px 0;
    div {
      i {
        font-size: 30px;
        font-weight: 700;
      }
    }
    p {
      color: rgb(107, 107, 107);
    }
  }
  div:nth-child(n + 2) {
    border-left: 1px solid #eee;
  }
}
.price {
  i {
    color: rgb(255, 153, 0);
  }
}

.count {
  i {
    color: rgb(255, 95, 62);
  }
}

.score {
  i {
    color: rgb(106, 194, 11);
  }
}
</style>